<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 
                vw:视图窗口宽度的计算值 100vw === 视图窗口宽度100%
                vh:视图窗口高度的计算值 100vh === 视图窗口高度100%
            */
            height: 100vh;
        }

        .box>img {
            position: absolute;
            z-index: 100;
            /* calc() 计算  */
            left: calc(50% - 25px);
            top: calc(100% - 62px);
        }
        .zidan{
            position: absolute;
            top: calc(100% - 62px);
            left: calc(50% - 25px);
            width: 10px;
            height: 40px;
            border-top: 1px solid #f00;
            background-image: linear-gradient(rgb(255, 47, 0),rgb(255, 221, 0),rgba(255, 0, 0, 0),rgba(255, 0, 0, 0));
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: top 0s linear;
            
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <span class="zidan"></span> -->
        <img src="./bd.png" alt="">
    </div>
    <script>
        // 当按下上下左右键盘,设置img的移动
        // 按下空格键 创建span标签 设置span标签从飞机头到页面最上方的动画 再删除span标签


        var img = document.querySelector(".box > img");
        var box = document.querySelector(".box");


        function aaa(e){
             // console.log(e);
            // 3.判断如果按下的不是37-40的值 直接结束函数运行
            if(e.keyCode < 37 || e.keyCode > 40) return;

            // 4.获取当前img标签的位置
            var l = img.getBoundingClientRect().x;
            var y = img.getBoundingClientRect().y;

            // 2.通过判断按下的键码值 确定按下的是上下左右 做出不一样的操作
            if(e.keyCode == 37){
                // 左
                l -= 5;
                if(l < 0) l = 0;
            }else if(e.keyCode == 38){
                // 上
                y -=5;
                if(y < 0) y = 0;
            }else if(e.keyCode == 39){
                // 右
                var maxl = window.innerWidth - img.offsetWidth;
                l += 5;
                if(l > maxl) l = maxl;
            }else if(e.keyCode == 40){
                // 下
                var maxy = window.innerHeight - img.offsetHeight;
                y += 5;
                if(y > maxy) y = maxy;
            }

            img.style.top = y + "px";
            img.style.left = l +"px";
        }
        
        // 1.添加键盘事件
        window.addEventListener("keydown",aaa)
        // 1.设置空格的按下事件
        window.addEventListener("keydown",function(e){
            // 2.如果按下的是不是空格,就结束这个函数的运行
            if(e.keyCode != 32) return;

            // 3.创建一个标签对象 span
            var span = document.createElement("span");
            // 4.添加class 带有子弹的样式
            span.classList.add("zidan");
            // 5.将span追加至box标签内
            box.appendChild(span);


            // 7.计算span的初始位置
            var sl = img.getBoundingClientRect().x + img.offsetWidth / 2 - span.offsetWidth / 2;
            var st = img.getBoundingClientRect().t + img.offsetHeight / 2;

            // 6.设置span的初始位置
            span.style.left = sl + "px";
            span.style.top = st + "px";
            // 7设置延迟,确保在第6步执行完成后 再设置新的span的位置
            setTimeout(function(){
                // 设置过度时间 完成top值更改的动画效果
                span.style.transitionDuration = "0.3s";
                span.style.top = -40 + "px";
            },4)

            // 8.等top的动画执行完成后, 删除span标签
            setTimeout(function(){
                box.removeChild(span);
            },310)

        })
    </script>
</body>

</html>